<template>
    <div>
        <!-- 头部部分 -->
        <div class="div1">
            <el-button class="b1" type="primary" size="mini" @click="saveGoods()">新增办公用品</el-button>  
            <el-button size="mini" style="width:120px" @click="BtnimportTheFile()">导入</el-button>
            <el-button size="mini" style="width:120px" @click="handleExport()">导出</el-button>
            <el-input class="in1" prefix-icon="el-icon-search" v-model="searchInfo.searchGoodsName"  @keyup.enter.native="submitSerch" placeholder="请输入办公用品名称" style="width:155px" size="mini"></el-input>
        </div>
       <!-- 主体部分 -->
    <div class="div2">
        <el-table v-loading="loading" :data="pageGoods.list">
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column label="办公用品名称" prop="goodsName" :show-overflow-tooltip="true" />
            <el-table-column label="所属分类" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                    <span>{{scope.row.goodsSortsNoid|filterSorts}}</span>
                </template>
            </el-table-column>
            <el-table-column label="使用方式" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                    <span>{{scope.row.goodsUserType|filterGender}}</span>
                </template>
            </el-table-column>
            <el-table-column label="规格/型号" prop="goodsType" :show-overflow-tooltip="true" />
            <el-table-column label="库存/总量" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                    <span>{{scope.row.goodsRemainderNumber}}/{{scope.row.goodsAllTotal}}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
            <template slot-scope="scope">
                <el-button
                    size="mini"
                    type="text"
                    icon="el-icon-edit"
                    @click="lookGoods(scope.row)"
                    v-hasPermi="['system:notice:edit']"
                    >详情</el-button>
                <el-button
                    size="mini"
                    type="text"
                    icon="el-icon-edit"
                    @click="goodsUpdate(scope.row)"
                    v-hasPermi="['system:notice:edit']"
                    >编辑</el-button>
                <el-button
                    size="mini"
                    type="text"
                    icon="el-icon-delete"
                    @click="goodsDelete(scope.row)"
                    v-hasPermi="['system:notice:remove']"
                    >删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        
        <pagination
        v-show="total>0"
        :total="total"
        :page.sync="pageGoods.pageNum"
        :limit.sync="pageGoods.pageSize"
        layout="prev, pager, next, jumper"
        @pagination="listGoods"
        />
    </div>
    
    <!-- 导入 -->
    <div>
        <el-dialog title="办公用品导入" :visible.sync="open">
            <p>请指定用于导入办公用品的文件：<a href="http://localhost:8082/upload/riji.xls" style="color: blue;">模版下载</a></p>
            <div class="divP">
                <p class="p1">
                    <el-input class="inp1" size="mini"></el-input>
                </p>
                <p class="p2">
                    <el-upload
                        class="upload-demo"
                        ref="upload"
                        :headers="headers"
                        :limit="1"
                        :action="importUrl"
                        :on-success="uploadSuccess"
                        accept=".xlsx,.xls"
                        :show-file-list="false"
                        :auto-upload="false"
                        multiple
                        >
                        <el-button  size="mini">预览</el-button>
                    </el-upload>
                </p>
                <p>
                    <el-button  type="primary" size="mini" @click="submitUpload()">导入</el-button>
                </p>
            </div>
        </el-dialog>
    </div>
</div>
</template>

<script>
import { goodsList , deleteGoods} from "@/api/administration/goods/goods";
import { getToken } from "@/utils/auth";
export default {
    name: 'RuoyiUiIndex',
    data() {
        return {
            loading:true,
            pageGoods:{
                pageNum:1,
                pageSize:8,
                list:[],
            },
            total:0,
            searchInfo:{searchGoodsName:'',},
            goods:{},
            open:false,
            // importUrl: administration/goods/importExcel",
            importUrl: process.env.VUE_APP_BASE_API + "/administration/goods/importExcel",
            headers: { Authorization: "Bearer " + getToken() },
        };
    },

    mounted() {
        this.listGoods();
    },

    methods: {
        // 展示物品管理信息
        listGoods(){
            this.loading = true;
            this.goods.goodsName = this.searchInfo.searchGoodsName;
            this.goods.pageNum = this.pageGoods.pageNum;
            this.goods.pageSize = this.pageGoods.pageSize;
            goodsList(this.goods).then(rel=>{
                this.pageGoods = rel.data;
                this.total = rel.data.total;
                this.loading = false;
            })
            console.log("上传访问接口"+this.importUrl);
        },
        // 新增办公物品
        saveGoods(){
            this.$router.push("/save");
        },
        //修改办公物品
        goodsUpdate(row){
            this.$router.push({ 
                path: '/save', 
                query: {
                            goodsId: row.goodsId,
                            flag : 0
                        }
            })
        },
        //删除办公物品
        goodsDelete(row){
            const goodsIds = row.goodsId;
            this.goods.goodsId = goodsIds;
            this.goods.delFlag = 2;
            this.$confirm('是否确认删除物品名称为'+ row.goodsName +'的数据项?').then((rel)=>{
                deleteGoods(this.goods).then(rel=>{
                    if(rel.code >= 200){
                        this.$modal.msgSuccess("删除成功");
                    }
                })
            }).catch(()=>{
                this.$modal.msgSuccess("取消删除");
            }).finally(()=>{
                this.listGoods();
            })
        },
        //多条件查询
        submitSerch(){
            this.pageGoods.pageNum = 1;
            this.listGoods();
        },
        //查看详情
        lookGoods(row){
            this.$router.push({ 
                path: '/save', 
                query: {
                            goodsId: row.goodsId,
                            flag : 1
                        }
            })
        },
        //点击导入
        BtnimportTheFile(){
            this.open = true;
        },
        //导入
        submitUpload(){
            this.$refs.upload.submit();
        },
        //上传成功钩子
        uploadSuccess(response, file, fileList){
            this.open = false;
            this.listGoods();
            this.$message({
                message: response.msg,
                type: 'success'
            })
        },
        //导出
        handleExport(){
            this.download('administration/goods/export',{...this.pageGoods}, `goods_${new Date().getTime()}.xlsx`)
        },
    },

    filters: {
        filterGender(val) {
            if (val == "2") {
                return "领用";
            } else {
                return "借用";
            }
        },
        filterSorts(val){
            if(val == "1"){
                return "办公消耗品";
            } else {
                return "办公设备";
            }
        },
        filterDateFormat1(srcVal){
            if(!srcVal){
                return "";
            }
            return srcVal.substr(0,19).replace("T", " ");
        },
    },
};
</script>

<style lang="scss" scoped>
    .div1 .b1{
        margin: 10px 63% 10px 32px;   
    }
    .div1 .in1{
        margin: 0px 0px 0px 20px;
    }
    .div2{
        width: 95%;
        margin: 20px;
    }
    .inp1{
        width:450px;
    }
    .divP{
        width:600px;
        height:100px;
    }
    .divP p{
        float:left;
        margin-right:10px;
    }
</style>